﻿<%@page language="abap"%>
﻿<!DOCTYPE HTML>
<html>
<head>
    <title>BI Apps - Layout Editor v0.1</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="Stylesheet" type="text/css" href="../css/common/admin_templ_style.css" />

    <link rel="Stylesheet" type="text/css" href="../theme/css/style_reset.css" />
    <link rel="Stylesheet" type="text/css" href="../theme/css/style_admin_tabs.css" />
    <link rel="Stylesheet" type="text/css" href="../theme/css/button_content.css" />
    <link rel="Stylesheet" type="text/css" href="../theme/css/form_content.css" />

    <script type="text/JavaScript" src="../api/js/jquery-1.8.3.js"></script>
    <script type='text/JavaScript' src='../../zbw_reporting/scripts/framework_include.js'></script>

    <style type="text/css">
        *[LOC] {
            background-image: url("../img/pie2.png");
            background-size: 100% 100%;
            text-align: center;
            vertical-align: middle;
            line-height: 50%;
            font-size: 16pt;
            border1: solid 1px gray;
        }

        *[LOC]:empty {
        }

        *[LOC]:hover {
            background-color: red;
        }
    </style>

    <script type="text/javascript">
        var colors = ['#97D3EB', '#DECEB5', '#9CAB8d', '#EDD898', '#C49764', '#9E9294', '#EBDBD0', '#D8D3DE', '#C5D1BB',
            '#97D3EB', '#DECEB5', '#9CAB8d', '#EDD898', '#C49764', '#9E9294', '#EBDBD0', '#D8D3DE', '#C5D1BB'];

        // otaism2a: 28,1,2014 to reduce multiple BOI.js while loading
        var BOI = parent.BOI;

        $(function () {
            load();
            $('#bi_kpi_btn_preview').live('click', render);
            $('#bi_kpi_btn_save').live('click', request);

            //better html editing with tab key support
            $("#bi_kpi_editor textarea").keydown(function (e) {
                if (e.keyCode === 9) { // tab was pressed
                    // get caret position/selection
                    var start = this.selectionStart;
                    var end = this.selectionEnd;

                    var $this = $(this);
                    var value = $this.val();

                    // set textarea value to: text before caret + tab + text after caret
                    $this.val(value.substring(0, start)
                            + "\t"
                            + value.substring(end));

                    // put caret at right position again (add one for the tab)
                    this.selectionStart = this.selectionEnd = start + 1;

                    // prevent the focus lose
                    e.preventDefault();
                }
            });
        });

        var app_id;
        var template_id;
        var mode = "V";
        var name = "";
        var template = {};
        var render = function () {
            var html = $('#bi_kpi_editor textarea').val();

            var i = 0;
            $('#bi_kpi_preview > div').html(html);

            $('#bi_kpi_preview >div').find('[LOC]').each(function () {
                $(this).html('<p>VIEW ' + $(this).attr('LOC') + '</p>');
                $(this).css('background-color', colors[i]);
                i++;
            });
        }

        function load() {
            //get template xml into textarea
            if (parent.current_template == undefined)
                return;
            app_id = parent.current_template.APP_ID;
            template_id = parent.current_template.TEMPLATE_ID;
            mode = parent.current_template.TYPE;
            name = parent.current_template.TEMPLATE_NAME;
            if (template_id) {
                //hide the form and show loading image
                $('body > div').hide();
                $('body').append(BOI.BOIData.render.loading(window.location.href));
                BOI.BOIData.read.getTemplate(app_id, template_id, function (data) {
                    $('#bi_template_id').val(template_id);
                    $('#bi_template_id').attr('readonly', 'readonly');
                    $('#bi_template_name').val(name);
                    $('#bi_kpi_editor textarea').val(formatXml(data));
                    render();
                    //show form
                    $('body').find('.bi_loading').remove();
                    $('body > div').fadeIn();
                    $('#APP_ID').append('<option value="' +parent.current_template.APP_ID + '" selected >' + parent.current_template.APP_ID + '</option>');
                    $('#APP_ID').attr("disabled",true);
                });
            } else{
                BOI.BOIData.list.getUserApps(function (data) {
                    $(data).find('APP').each(function () {
                        if($(this).text() == app_id){
                            $('#APP_ID').append('<option value="' + $(this).text() + '" selected >' + $(this).text() + '</option>');
                        }   else{
                            $('#APP_ID').append('<option value="' + $(this).text() + ' ">' + $(this).text() + '</option>');
                        }
                    });
                });
            }
        }
        function formatXml(xml) {
            var formatted = '';
            var reg = /(>)(<)(\/*)/g;
            xml = xml.replace(reg, '$1\r\n$2$3');
            var pad = 0;
            jQuery.each(xml.split('\r\n'), function (index, node) {
                var indent = 0;
                if (node.match(/.+<\/\w[^>]*>$/)) {
                    indent = 0;
                } else if (node.match(/^<\/\w/)) {
                    if (pad != 0) {
                        pad -= 1;
                    }
                } else if (node.match(/^<\w[^>]*[^\/]>.*$/)) {
                    indent = 1;
                } else {
                    indent = 0;
                }

                var padding = '';
                for (var i = 0; i < pad; i++) {
                    padding += '  ';
                }

                formatted += padding + node + '\r\n';

                pad += indent;
            });

            return formatted;
        }

        var request = function request() {
            var req, method_name, class_name;
            class_name = "ZCL_MYBW_VAR_TEMPLATE";
            method_name = template_id ? "UPDATE" : "CREATE";

            template['APP_ID'] = $('#APP_ID').val();
            template['TEMPLATE_ID'] = $('#bi_template_id').val();
            template['TEMPLATE_NAME'] = $('#bi_template_name').val();
            template['TYPE'] = mode;
            template['XML'] = $('#bi_kpi_editor textarea').val();

            var record = new BOI.BOIData.Record();
            for (var i in template) {
                param = new BOI.BOIData.Parameter();
                param.name = i;
                param.values = template[i] == null ? [""] : [template[i]];
                record.parameters.push(param);
            }

            req = BOI.BOIData.request.prepare(class_name, method_name, [record]);

            BOI.BOIData.request.perform(req, 'text', 'POST', function (data) {
                //alert($(data).find('MESSAGE').text());
                BOI.BOILib.Util.log($(data).find('MESSAGE').text(),true);
                parent.current_template = template;
                //parent.refresh(undefined, method_name);
                parent.refreshTemplates();
            });

        }
    </script>

</head>
<body>
<div class="tab-frame" id="bi_admin_layout_editor">
    <div class="tab-form">
        <div class="header">
            <h2>BI Apps - Layout Editor</h2>
            <ul>
                <li>
                    <label>
                        APP ID:
                    </label>
                    <select id="APP_ID" name="APP_ID"></select>
                </li>
                <li>
                    <label>
                        ID:
                    </label>
                    <input type="text" id="bi_template_id" />
                </li>
                <li>
                    <label>
                        Name
                    </label>
                    <input type="text" id="bi_template_name" />
                </li>
                <li>
                    <label></label>
                    <a id="bi_kpi_btn_preview" class="button-content-BW" href="#"><span>Preview</span></a>
                    <a id="bi_kpi_btn_save" class="button-content-WB" href="#"><span>Save</span></a>
                </li>
                <li>
                    <p>Edit the Template XHTML Layout then click Preview to see the resulting layout</p>
                </li>
            </ul>
        </div>
        <div class="top-content">
            <div id="bi_kpi_editor" class="left-50">
                <h3>Template Layout Source</h3>
                <textarea id="bi_kpi_source" wrap="off"></textarea>
            </div>
            <div id="bi_kpi_preview" class="right-50">
                <h3>Template Layout Preview</h3>
                <div class="textarea"></div>
            </div>
            <div class="clear"></div>

        </div>
    </div>
</div>
</body>
</html>